<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
          <el-form-item label="">
            <el-input v-model="queryParams.user_name" placeholder="设备编号" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="queryParams.user_name" placeholder="一级支行" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item label="" v-if="active == 1">
            <el-input v-model="queryParams.user_name" placeholder="二级支行" clearable style="width: 200px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search"> 搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" :offset="8">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
          <el-form-item label="">
            <el-button type="primary" icon="Plus" @click="login.open = true"> 注册平板</el-button>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" icon="CloseBold" @click="onClick"> 作废设备</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="state.list">
      <el-table-column type="selection" align="center" />
      <el-table-column label="设备编号" align="center" prop="id" width="100" />
      <el-table-column label="设备品牌" align="center" prop="name" />
      <el-table-column label="设备型号" align="center" prop="type"> </el-table-column>
      <el-table-column label="设备状态" align="center" prop="status" />
      <el-table-column label="虚拟柜员" align="center" prop="teller"> </el-table-column>
      <el-table-column label="所属一级支行" align="center" prop="bank1" width="200"> </el-table-column>
      <el-table-column label="所属二级支行" align="center" prop="bank2" width="200"> </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="180" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="信息修改" placement="top">
            <el-button link type="primary" icon="Edit" @click="handleView(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
          </el-tooltip>
          <el-tooltip content="设备调拨" placement="top">
            <el-button link type="primary" icon="Setting" @click="handleSetV(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
          </el-tooltip>
          <el-tooltip content="绑定" placement="top">
            <el-button link type="primary" icon="ZoomIn" @click="handleBind(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" icon="Delete" @click="handleDel(scope.row)" v-hasPermi="['monitor:job:query']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" />
    <!-- 信息修改 -->
    <el-dialog :title="preview.title" v-model="preview.open" width="40%" top="100vh" append-to-body class="scrollbar">
      <el-form :model="preview" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="设备编号">
          <el-input v-model="preview.id" placeholder="设备编号" disabled />
        </el-form-item>
        <el-form-item label="设备品牌">
          <el-input v-model="preview.name" placeholder="设备品牌" disabled />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="preview.type" placeholder="设备型号" disabled />
        </el-form-item>
        <el-form-item label="设备状态">
          <el-input v-model="preview.status" placeholder="设备状态" />
        </el-form-item>
        <el-form-item label="一级支行">
          <!-- <el-input v-model="preview.bank1" placeholder="一级支行" /> -->
          <el-select v-model="preview.bank1" class="m-2" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级支行">
          <!-- <el-input v-model="preview.bank2" placeholder="二级支行" /> -->
          <el-select v-model="preview.bank2" class="m-2" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="margin-left: 240px" @click="onSubmit(preview)"> 保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 设备调拨界面 -->
    <el-dialog :title="register.title" v-model="register.open" width="35%" top="100vh" append-to-body class="scrollbar">
      <el-form :model="register" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="一级支行">
          <el-input v-model="register.bank1" placeholder="一级支行" />
        </el-form-item>
        <el-form-item label="二级支行">
          <el-input v-model="register.bank2" placeholder="二级支行" />
        </el-form-item>
        <el-form-item label="设备状态">
          <el-input v-model="register.status" placeholder="设备状态" disabled />
        </el-form-item>
        <el-form-item label="使用人员">
          <el-input v-model="register.person" placeholder="使用人员" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 220px" @click="onConfirm"> 保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 设备绑定界面 -->
    <el-dialog :title="binding.title" v-model="binding.open" width="35%" top="100vh" append-to-body class="scrollbar">
      <el-form :model="binding" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="一级支行">
          <el-input v-model="binding.bank1" placeholder="一级支行" />
        </el-form-item>
        <el-form-item label="二级支行">
          <el-input v-model="binding.bank2" placeholder="二级支行" />
        </el-form-item>
        <el-form-item label="虚拟柜员号">
          <el-input v-model="binding.code" placeholder="虚拟柜员号" />
        </el-form-item>
        <el-form-item label="使用人员">
          <el-input v-model="binding.person" placeholder="使用人员" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-left: 220px" @click="onSave"> 保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 注册PAD界面 -->
    <el-dialog :title="login.title" v-model="login.open" width="45%" top="100vh" append-to-body class="scrollbar">
      <el-form :model="login" ref="queryRef" :label-position="labelPosition" label-width="100px" :inline="true" v-show="showSearch">
        <el-form-item label="设备编号">
          <el-input v-model="login.id" placeholder="设备编号" />
        </el-form-item>
        <el-form-item label="设备品牌">
          <el-input v-model="login.name" placeholder="设备品牌" />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-input v-model="login.type" placeholder="设备型号" />
        </el-form-item>
        <el-form-item label="设备状态">
          <el-input v-model="login.status" placeholder="设备状态" />
        </el-form-item>
        <el-form-item label="设备系统信息">
          <el-input v-model="login.status" placeholder="设备系统信息" />
        </el-form-item>
        <el-form-item label="指定领用人">
          <el-input v-model="login.status" placeholder="指定领用人" />
        </el-form-item>
        <el-form-item label="一级支行">
          <!-- <el-input v-model="login.bank1" placeholder="一级支行" /> -->
          <el-select v-model="login.bank1" class="m-2" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级支行">
          <!-- <el-input v-model="login.bank2" placeholder="二级支行" /> -->
          <el-select v-model="login.bank2" class="m-2" placeholder="请选择">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="margin-left: 240px" @click="onSign"> 保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="Job">
import { loanReexamineList, loanReexamineInfo } from "@/api/loanBefore";
import Crontab from "@/components/Crontab";
import { auditStatus, loanTypes, auditResult, auditType, methodType } from "@/utils/dict";
import { onMounted } from "vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
const router = useRouter();
const { proxy } = getCurrentInstance();

const state = reactive({
  list: [
    {
      id: 1,
      name: "huawei",
      type: "huaweiC5",
      status: "已注册",
      teller: "009988",
      bank1: "青山支行",
      bank2: "绿树支行",
    },
    {
      id: 2,
      name: "huawei",
      type: "huaweiC5",
      status: "已注册",
      teller: "009998",
      bank1: "青山支行",
      bank2: "绿树支行",
    },
    {
      id: 3,
      name: "huawei",
      type: "huaweiC5",
      status: "已注册",
      teller: "009978",
      bank1: "青山支行",
      bank2: "绿树支行",
    },
    {
      id: 4,
      name: "huawei",
      type: "huaweiC5",
      status: "已注册",
      teller: "009986",
      bank1: "青山支行",
      bank2: "绿树支行",
    },
    {
      id: 5,
      name: "huawei",
      type: "huaweiC5",
      status: "已注册",
      teller: "009980",
      bank1: "青山支行",
      bank2: "绿树支行",
    },
  ],
  tableData: [],
});
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = reactive([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const value2 = ref("");
const props = defineProps({
  active: {
    type: String,
  },
});

const labelPosition = ref("right");
const options = [
  {
    value: "青山支行",
    label: "青山支行",
  },
  {
    value: "清江支行",
    label: "清江支行",
  },
  {
    value: "商水支行",
    label: "商水支行",
  },
  {
    value: "商河支行",
    label: "商河支行",
  },
  {
    value: "山河支行",
    label: "山河支行",
  },
  {
    value: "江水支行",
    label: "江水支行",
  },
];
const options2 = [
  {
    value: "绿树支行",
    label: "绿树支行",
  },
  {
    value: "大理支行",
    label: "大理支行",
  },
  {
    value: "黄河支行",
    label: "黄河支行",
  },
  {
    value: "长江支行",
    label: "长江支行",
  },
  {
    value: "西山支行",
    label: "西山支行",
  },
  {
    value: "西湖支行",
    label: "西湖支行",
  },
];

const data = reactive({
  form: {},
  queryParams: {
    page_count: 1,
    page_size: 10,
    name: "", //姓名
    phone: "", //电话
    status: "", //状态
    type: "", //类型
    time: "", //时间
    startTime: "", //开始时间
    endTime: "", //结束时间
  },
  preview: {
    open: false,
    title: "修改设备信息",
    data: {},
    activeName: "domain.java",
    id: "",
    name: "",
    type: "",
    bank1: "",
    bank2: "",
    status: "",
  },
  edit: {
    open: false,
    title: "",
    data: {},
    activeName: "domain.java",
  },
  binding: {
    open: false,
    title: "绑定设备",
    data: {},
    activeName: "domain.java",
  },
  register: {
    open: false,
    title: "设备调拨",
    data: {},
    activeName: "domain.java",
  }, //调拨
  login: {
    open: false,
    title: "注册平板",
    data: {},
    activeName: "domain.java",
  }, //调拨
});

const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
});

const { queryParams, form, binding, preview, edit, register, login } = toRefs(data);

//信息修改
function handleView(val) {
  console.log(val, "val");
  preview.value.id = val.id;
  preview.value.name = val.name;
  preview.value.type = val.type;
  preview.value.bank1 = val.bank1;
  preview.value.bank2 = val.bank2;
  preview.value.status = val.status;
  preview.value.open = true;
}

//修改信息保存
function onSubmit(val) {
  console.log(val, "2222");
  ElMessage({
    message: "保存成功",
    type: "success",
  });
  preview.value.open = false;
}

//设备调拨
function handleSetV(val) {
  console.log(val, "www");
  register.value.id = val.id;
  register.value.name = val.name;
  register.value.type = val.type;
  register.value.bank1 = val.bank1;
  register.value.bank2 = val.bank2;
  register.value.status = val.status;
  register.value.open = true;
}

function onConfirm() {
  ElMessage({
    message: "保存成功",
    type: "success",
  });
  register.value.open = false;
}

//绑定
function handleBind(val) {
  binding.value.open = true;
  binding.value.id = val.id;
  binding.value.name = val.name;
  binding.value.type = val.type;
  binding.value.bank1 = val.bank1;
  binding.value.bank2 = val.bank2;
  binding.value.status = val.status;
}

function onSave() {
  ElMessage({
    message: "保存成功",
    type: "success",
  });
  binding.value.open = false;
}

function onSign() {
  ElMessage({
    message: "保存成功",
    type: "success",
  });
  login.value.open = false;
}

//删除
function handleDel() {
  //   preview.value.open = true;
  ElMessage({
    message: "删除成功",
    type: "success",
  });
}

function onClick() {
  ElMessageBox.confirm("确定删除该数据吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  });
}
</script>
<style lang="scss" scoped>
.statusStyle {
  color: #ff0000;
}
:deep(.el-dialog) {
  height: 100px;
}
.pagination-container {
  height: 56px;
  margin-top: 15px;
}
</style>
